<!DOCTYPE html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <title></title>
    <meta content="width=device-width" name="viewport">

    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
    <link href="/dist/release/ui-grid.css" rel="stylesheet">

    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="/lib/test/angular/1.2.26/angular.js"></script>
    <script src="/dist/release/ui-grid.js"></script>

    <style>
        body {
            padding: 60px;
            min-height: 600px;
        }

        .viewport {
          width: 400px;
          height: 400px;
          overflow: hidden;
          border: 1px solid black;
        }

        .canvas {
          height: 15000px;
          width: 400px;
          background: linear-gradient(135deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px), linear-gradient(225deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px)0 64px;
          background-color:#708090;
          background-size: 64px 128px
        }
    </style>
</head>
<body>

<div class="viewport">
  <div class="canvas"></div>
</div>

<script>
  $(document).ready(function () {
    var $v = $('.viewport');
    $v.on('mousewheel', function (evt) {
      console.log('scrollTop', $v[0].scrollTop);
    });
  });
</script>

</body>
</html>

